import Vue from "vue";
// import VueRouter from "vue-router";
import VueRouter from "@/vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

Vue.use(VueRouter); // 注册的时候就天生生成了两个组件
// 核心实现就是根据路径变化 找到相应的组件， 显示到router-view中
// hash 模式  history模式
const routes = [
  // 映射表， 用户配置
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: About,
    // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    children: [
      {
        path: "a",
        component: {
          render: (h) => <h1>About - A页面</h1>,
        },
      },
      {
        path: "b",
        component: {
          render: (h) => <h1>About - B页面</h1>,
        },
      },
    ],
  },
];

// 最终生成了一个vue-router实例
const router = new VueRouter({
  // mode: "hash", // # 丑 兼容性好
  mode: "history", // # 丑 兼容性好
  // / 好看，但是需要服务端支持， 在开发环境内部提供了historyFallback插件
  routes,
});
router.beforeEach((to, from, next) => {
  // 【全局钩子 路由钩子 组件钩子】都放在一个数组中
  // 其中beforeEach是一个全局钩子
  console.log(from, to, 1);
  next();
});
router.beforeEach((to, from, next) => {
  console.log(from, to, 2);
  next();
});

export default router;
